<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src">
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src">
    </viewer>
    <!-- api -->
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
<script setup>
import { getCurrentInstance, ref } from "vue"
const $viewerApi = getCurrentInstance().appContext.config.globalProperties.$viewerApi
const images = ref(["https://picsum.photos/200/200",
  "https://picsum.photos/300/200",
  "https://picsum.photos/250/200"])
const show = () => {
  $viewerApi({
    images: images.value,
  })
}
</script>